import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import QtQuick.Layouts

Item {
    id: imgEditView
    width: 640
    height: 480

    property string sourceImgURL: ""
    property int editMenuIndex: 0

    function replaceSourceImg() {
        switch(editMenuIndex) {
            case 0:
                blend.grabToImage(function(result) {
                    sourceImgURL = result.url
                })
                break;
            case 1:
                brightnessContrast.grabToImage(function(result) {
                    sourceImgURL = result.url
                })
                break;
        }
    }

    function saveChangedImg() {
        switch(editMenuIndex) {
            case 0:
                blend.grabToImage(function(result) {
                    result.saveToFile(myFile.saveImageFile())
                })
                break;
            case 1:
                brightnessContrast.grabToImage(function(result) {
                    result.saveToFile(myFile.saveImageFile())
                })
                break;
        }
    }

    Connections {
        target: myFile

        function onFilePathChanged(flag) {
//            console.log(flag)
            var filePath = "file:///"+myFile.getFilePath(flag);
            switch(flag) {
                case 0: sourceImgURL = filePath; break;
                case 1: blendViewItemForeImage.source = filePath; break;
            }
        }
    }

    ImgEditMenu {
        id: imgEditMenu
        width: 150
        height: parent.height
        color: "#404142"

        onImgEditModeClicked: function(index) {
            editMenuIndex = index
            imgEditSetting.setCurrentDisplayItem(index)
        }
    }

    Rectangle {
        id: imgEditImageView
        anchors.left: imgEditMenu.right
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: imgEditSettingRect.top
        color: "#888888"

        Image {
            id: sourceImage
            x: 10
            y: 10
            width: (parent.width - 30) / 2
            height: parent.height - 20
            source: sourceImgURL
            smooth: true

            onSourceChanged: {
                console.log(width,height)
            }
        }

        StackLayout {
            id: changedImgStackLayout
            x: sourceImage.x + sourceImage.width + 10
            y: 10
            width: (parent.width - 30) / 2
            height: parent.height - 20
            currentIndex: editMenuIndex

            Item {
                id: blendItem
                width: parent.width
                height: parent.height

                Blend {
                    id: blend
                    anchors.fill: parent
                    source: sourceImage
                    foregroundSource: blendViewItemForeImage
                }

                Image {
                    id: blendViewItemForeImage
                    anchors.fill: parent
                    smooth: true
                    visible: false
                }
            }

            Item {
                id: brightnessContrastItem
                width: parent.width
                height: parent.height

                BrightnessContrast {
                    id: brightnessContrast
                    anchors.fill: parent
                    source: sourceImage
                }
            }

            Item {
                id: colorOverlayItem
                width: parent.width
                height: parent.height

                ColorOverlay {
                    id: colorOverlay
                    anchors.fill: parent
                    source: sourceImage
                }
            }

            Item {
                id: colorizeItem
                width: parent.width
                height: parent.height

                Colorize {
                    id: colorize
                    anchors.fill: parent
                    source: sourceImage
                }
            }

            Item {
                id: conicalGradientItem
                width: parent.width
                height: parent.height

                ConicalGradient {
                    id: conicalGradient
                    anchors.fill: parent
                    source: sourceImage
                }
            }

            Item {
                id: desaturateItem
                width: parent.width
                height: parent.height

                Desaturate {
                    id: desaturate
                    anchors.fill: parent
                    source: sourceImage
                }
            }
        }
    }

    Rectangle {
        id: imgEditSettingRect
        anchors.left: imgEditMenu.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 200
        clip: true

        ImgEditSetting {
            id: imgEditSetting
            itemWidth: parent.width
            itemHeight: parent.height
            width: itemWidth * 2
            height: itemHeight

            onBlendModeChanged: function(mode) {
//                console.log("blend mode:" + mode)
                blend.mode = mode
                // 选择模式时 原图片和前景图片会变得不显示 原因未知 暂时使用以下方法解决
                sourceImage.visible = false
                sourceImage.visible = true
                blendViewItemForeImage.visible = false
                blendViewItemForeImage.visible = true
            }

            onBrightnessContrastValueChanged: function(brightness, contrast) {
//                console.log("brightness:" + brightness + ", contrast:" + contrast)
                brightnessContrast.brightness = brightness !== 255 ? brightness : brightnessContrast.brightness
                brightnessContrast.contrast = contrast !== 255 ? contrast : brightnessContrast.contrast
            }

            onColorOverlayColorChanged: function(color) {
                colorOverlay.color = Qt.color(color)
            }

            onColorizeValueChanged: function(hue, lightness, saturation) {
                colorize.hue = hue !== 255 ? hue : colorize.hue
                colorize.lightness = lightness !== 255 ? lightness : colorize.lightness
                colorize.saturation = saturation !== 255 ? saturation : colorize.saturation
            }

            onConicalGradientValueChanged: function(gradient, angle, horizontalOffset, verticalOffset) {
                conicalGradient.gradient = gradient !== 255 ? gradient : conicalGradient.gradient
                conicalGradient.angle = angle !== 255 ? angle : conicalGradient.angle
                conicalGradient.horizontalOffset = horizontalOffset !== 255 ? horizontalOffset : conicalGradient.horizontalOffset
                conicalGradient.verticalOffset = verticalOffset !== 255 ? verticalOffset : conicalGradient.verticalOffset
            }
        }
    }

}
